// In App.js in a new project

import React, { Component } from 'react';
import { StackNavigator } from 'react-navigation';
import HomeScreen from "./src/page/home";
import DetailsScreen from "./src/page/detail";
import ModalScreen from "./src/page/modal";
import ExampleScreen from "./src/page/example";


const MainStack = StackNavigator(
    {// 参数 1 : 路由配置对象
        Home: { // 上面例子已经提到的第一个屏幕
            screen: HomeScreen,
        },
        Details: { // 该例子新加的第二个屏幕
            screen: DetailsScreen,
        },
        Example: { // 该例子新加的第3个屏幕
            screen: ExampleScreen,
        },
    },
    {// 参数 2 : 选项对象
        initialRouteName: 'Home',
        /* 这里定义的头部样式对栈中的每个屏幕生效除非那个屏幕类覆盖了改定义 */
        navigationOptions: {
            headerStyle: {
                backgroundColor: '#f4511e',
            },
            headerTintColor: '#fff',
            headerTitleStyle: {
                fontWeight: 'bold',
            },
        },
    }
);


const RootStack = StackNavigator(
    {
        Main: {
            screen: MainStack,
        },
        MyModal: {
            screen: ModalScreen,
        },
    },
    {
        mode: 'modal',// 注意这里设置为 modal
        headerMode: 'none', // 注意这里 none 表示不显示导航头部
    }
);


// 这样你可以在继承自 Component 的 App 上有更多的控制
export default class App extends Component {

    render() {
        return <RootStack />;
    }
}